<template>
	<view class="content">
		<yHeader :current="7" :screenWidth="screenWidth" @Tabs="handleTabs" @EditLogin="handleExit"></yHeader>
		<view v-if="screenWidth > 480" class="bg-grey pt-4" style="width: 100%">
			<view class="__inner flex justify-between">
				<!-- 左 -->
				<view style="width: 20%;height: 1000rpx;" class=" flex flex-column justify-between">
					<view class="bg-white py-2" style="height: 100%;">
						<view @click="mouseenter(i)" @mouseleave="mouseleave" v-for="(item,i) in leftData" :key="i"
							class="flex align-center hover" style="height: 20%;" :class="active==i?activeclass:''">
							<text class="ml-4">{{item.title}}</text>
						</view>
					</view>
				</view>
				<!-- 右 -->
				<view style="width: 75%;" class="bg-white p-4 flex flex-column">
					<view style="height: 100rpx;"
						class="font-big py-2 font-weight-bold w-100 border-bottom-dark text-center">
						<text>{{leftData[active].title}}</text>
					</view>
					<view style="line-height: 80rpx;" class="flex flex-column py-4">
						<view v-if="active==0" v-html="Data[0].Company_Profile_Main" class="">
						</view>
						<view v-if="active==1" class="flex justify-center">
							<!-- <el-steps direction="vertical" :active="3">
								<el-step v-for="(item,i) in Data" :key="i" :title="`${item.Company_History_Title + item.Company_History_Date}`" :description="item.Company_History_Main"></el-step>
							</el-steps> -->
							<el-timeline>
								<el-timeline-item v-for="(item,i) in Data" :key="i" :timestamp="item.Company_History_Date" placement="top">
									<el-card>
										<text>{{item.Company_History_Title}}</text>
										<text>{{item.Company_History_Main}}</text>
									</el-card>
								</el-timeline-item>
							</el-timeline>
						</view>
						<view v-if="active==2" class="w-100">
							<view class="flex w-100 justify-between" style="flex-wrap: wrap;">
								<view v-for="(item,i) in Data" :key="i"
									class="flex border-grey align-center flex-column w-100 m-1"
									style="width: 28%;margin-right: auto;">
									<image class="w-100 border-grey p-2"
										style="height: 300rpx;border-width: 2rpx;border-style: solid;"
										:src="Domain_Business + item.Picture_URL" mode=""></image>
									<text>{{item.Company_Honors_Name}}</text>
								</view>
							</view>
						</view>
						<view v-if="active==3" v-for="(item,i) in Data" :key="i" class="">
							<text v-html="item.Company_Profile_Main"></text>
						</view>
						<view v-if="active==4" class="">
							<!-- <el-steps direction="vertical" :active="1">
							    <el-step v-for="(item,i) in Data" :key="i" :title="item."></el-step>
							  </el-steps> -->
							<el-table :header-cell-style="{background:'#bbb]',color:'#aaa'}" :data="Data" border style="width: 100%">
								<el-table-column align="center" prop="Company_Business_Personnel_Name" label="姓名">
								</el-table-column>
								<el-table-column align="center" prop="Company_Business_Personnel_Position" label="职位">
								</el-table-column>
								<el-table-column align="center" prop="Company_Business_Personnel_Phone" label="手机号">
								</el-table-column>
							</el-table>
							<view class="flex flex-column mt-4">
								<view v-for="(item,i) in Data1" :key="i" class="flex flex-column">
									<text class="font-lg font-weight-bold"
										:class="'text-'+ThemeColors">{{item.Company_Address_Name}}</text>
									<view><text class="font-md">手机号</text>:{{item.Company_Address_Phone}}</view>
									<view><text class="font-md">邮编</text>:{{item.Company_Address_ZipCode}}</view>
									<view><text class="font-md">地址</text>:{{item.Company_Address}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<yFooter Show v-if="screenWidth > 480" :screenWidth="screenWidth"></yFooter>
	</view>
</template>

<script>
	const app = getApp();
	import {
		Message
	} from "element-ui";
	import {
		getTableInquiry
	} from '@/api/global.js'
	import yHeader from "@/components/yHeader.vue";
	import yFooter from "@/components/yFooter.vue";
	export default {
		components: {
			yHeader,
			yFooter,
		},
		data() {
			return {
				Domain_Business: app.globalData.Domain_Business,
				screenWidth: uni.getSystemInfoSync().windowWidth,
				ThemeColors: app.globalData.ThemeColors,
				bg_white: "bg-white",
				isLogin: false,
				active: 0,
				activeclass: '',
				Data: [{
					Company_Profile_Main: ''
				}],
				Data1: [],
				form: {
					Data: 'company_profile',
					Primary_Key: '0',
					Primary_Key_Name: 'Company_Profile_Type',
					page: 1,
					limit: 1,
				},
				form1: {
					Data: 'company_address',
					page: 1,
					limit: 1,
				},
				form2: {
					Data: 'company_address',
					page: 1,
					limit: 1,
				},
				leftData: [{
					title: '公司简介',
				}, {
					title: '历史沿革'
				}, {
					title: '资质荣誉'
				}, {
					title: '加入我们'
				}, {
					title: '联系我们'
				}],
			};
		},
		onLoad() {
			this.activeclass = 'text-' + this.ThemeColors + ' ' + 'border-left-' + this.ThemeColors
			this.mouseenter(0)
		},
		methods: {
			handleTabs(url) {
				uni.navigateTo({
					url,
				});
			},
			handleExit() {
				//退出
				uni.removeStorageSync("loginInfo")
				this.isLogin = false;
				this.getData(this.supplyForm, this.purchaseform);
				window.history.go(0)
			},
			mouseenter(i) {
				this.active = i
				this.activeclass = 'text-' + this.ThemeColors + ' ' + 'border-left-' + this.ThemeColors
				if (i == 0) {
					this.form.limit = 1
					this.form.Data = 'company_profile'
					this.form.Primary_Key = "0",
					this.form.Order_Key_Name = "Company_Profile_Date",
					this.form.Order_Desc = '1'
					this.form.Primary_Key_Name = "Company_Profile_Type",
					this.GetList(this.form)
				} else if (i == 1) {
					this.form2.limit = 999
					this.form2.Data = 'company_history'
					this.GetList(this.form2)
				} else if (i == 2) {
					this.form2.limit = 999
					this.form2.Data = 'company_honors'
					this.GetList(this.form2)
				} else if (i == 3) {
					this.form.limit = 1
					this.form.Primary_Key = "1",
					this.form.Order_Key_Name = "Company_Profile_Date",
					this.form.Order_Desc = '1'
					this.form.Primary_Key_Name = "Company_Profile_Type",
					this.form.Data = 'company_profile'
					this.GetList(this.form)
				} else if (i == 4) {
					this.form2.limit = 999
					this.form2.Data = 'company_business_personnel'
					this.GetList(this.form2)
					this.GetList1(this.form1)
				}
			},
			mouseleave() {
			},
			async GetList(data) {
				const res = await getTableInquiry({
					data
				})
				this.Data = res.tableData
			},
			async GetList1(data) {
				const res = await getTableInquiry({
					data
				})
				this.Data1 = res.tableData
			},
		}
	}
</script>

<style lang="scss">
	.hover:hover {
		cursor: pointer;
		text-decoration: underline;
	}
</style>